<template>
<div class="meContent">
    <snow :snows="30"></snow>
    <audio ref="audioRefPlay" :src="audioSrc" preload="auto"></audio>
    <div class="user">
        <div class="userImg">
            <img src="@/assets/img/userImg.png" alt="">
        </div>
        <div class="userInfo">
            <div class="userInfoTitle">
                <p v-if="settings.isLogin">{{ title }}</p>
                <p v-else @click="goLogin">{{ '点击登录' }}</p>
            </div>
            <div class="userInfoText">
                <span v-if="settings.isLogin">{{ titleText }}</span>
            </div>
        </div>
    </div>
    <div class="mainBox">
        <div class="mainBoxItem itemBackColor-red" v-for="(item, index) in individualityList" :key="index" @click="individualityBtn">
            <span class="mainBoxItemText">{{ item }}</span>
        </div>
    </div>
    <Robot @RobotTap="RobotTap"></Robot>
    <div class="meListBox">
        <div class="meListBoxItem" v-for="(item, index) in meDataList" :key="item.id" @click="goMeData(item)">
            <div class="meListBoxItemLeft">
                <div class="meListBoxItemLeftIcon">
                    <SvgIcon width="40px" height="40px" :name="item.icon" color="#f5c3cb"></SvgIcon>
                </div>
                <div class="meListBoxItemLeftTitle">
                    <span class="meListBoxItemLeftTitle1">{{ item.title }}</span>
                    <span class="meListBoxItemLeftTitle2">{{ item.text }}</span>
                </div>
            </div>
            <div class="meListBoxItemRight">
                <van-icon name="arrow"size="20" />
            </div>
        </div>
    </div>
    <div class="meMainBox">

    </div>
</div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { whatTime } from '@/utils/plugins'
import { showNotify, showToast } from 'vant';
import useSettingStore from '@/store/modules/setting'
const settings = useSettingStore()

import audioUrl from '@/assets/music/welcome.mp3'

const route = useRoute()
const router = useRouter()
const title = ref<string>('me')
const titleText = ref<string>('探索更多内容')

const audioSrc = ref<any>(audioUrl)
// audioSrc.value = '../../../../../public/music/' + val + '.mp3'
const audioRefPlay = ref<any>(null)

const play = () => {
    audioRefPlay.value.play()
}

const pause = () => {
    audioRefPlay.value.pause()
}

const individuality = ref<string>('万事胜意平安喜乐')
const individualityList = computed(() => {
    return individuality.value.split('')
})

const individualityBtn = () => {
    showToast(individuality.value)
}

const meDataList = ref<any>([
    // {
    //     id: '1',
    //     title: '相册',
    //     icon: 'photoAlbum',
    //     text: '点击查看相册内容',
    //     path: ''
    // },
    // {
    //     id: '99',
    //     title: '敬请期待',
    //     icon: 'more',
    //     text: '更多内容开发中...',
    //     path: ''
    // },
])

const goMeData = (item: any) => {
    if (item.path === '') {
        showToast('功能开发中，敬请期待！')
    }
    router.push({
        path: item.path,
        query: {
            title: item.title
        }
    })
}

const goLogin = () => {
    router.push('/login')
}

const RobotTap = (val: any) => {
    console.log('组件信息：', val)
    showToast(val)
}

const showShowNotify = () => {
    if (sessionStorage.getItem('firstUse') == '0') return
    sessionStorage.setItem('firstUse', '1')
    showNotify({
        message: `Hi~ ${whatTime()}好！`,
        color: '#FFFFFF',
        background: '#bca1f3',
        duration: 1500, // 持续时间，单位为毫秒
        position: 'top', // 位置，可以是 'top'、'bottom'、'top-left'、'top-right'、'bottom-left'、'bottom-right'
    });
    sessionStorage.setItem('firstUse', '0')
}

onMounted(() => {
    nextTick(() => {
        // showShowNotify()
        // play()
    })
})

</script>


<style lang="scss" scoped>
.meContent {
    width: 100%;
    // padding: 15px;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    .user {
        padding: 15px;
        margin-top: 20px;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        .userImg {
            width: 80px;
            height: auto;
            margin-right: 30px;
            img {
                border-radius: 50%;
                width: 100%;
                height: 100%;
            }
        }
        .userInfo {
            display: flex;
            flex-direction: column;
            justify-content: center;
            .userInfoTitle {
                margin-bottom: 10px;
                p {
                    font-size: 20px;
                    font-weight: 500;
                }
            }
            .userInfoText {
                span {
                    font-size: 12px;
                    color: #999;
                }
            }
        }
    }
    .mainBox {
        width: 100%;
        // background-color: var(--background);
        height: auto;
        margin-top: 20px;
        overflow-x: auto;
        white-space: nowrap;
        padding: 5px 0;
        padding-left: 15px;
        .mainBoxItem {
            width: 100px;
            height: 100px;
            display: inline-block;
            border-radius: 20px;
            padding: 10px;
            margin-right: 10px;
            overflow: hidden;
            .mainBoxItemText {
                width: 100%;
                height: 100%;
                font-size: 45px;
                font-family: 'ZCOOL XiaoWei', serif;
                font-weight: 700;
                color: #b2a06e;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        .itemBackColor-pink {
            background-color: pink;
        }
        .itemBackColor-skyblue {
            background-color: skyblue;
        }
        .itemBackColor-red {
            background-color: #9f3124;
        }
    }
    .meListBox {
        width: 100%;
        margin-top: 15px;
        padding: 0 5px;
        padding: 15px;
        .meListBoxItem {
            width: 100%;
            height: 70px;
            background-color: var(--background);
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            border-bottom: 0.5px solid #eee;
            .meListBoxItemLeft {
                height: 100%;
                display: flex;
                flex-direction: row;
                align-items: center;
                .meListBoxItemLeftIcon {
                    margin-right: 20px;
                }
                .meListBoxItemLeftTitle {
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    .meListBoxItemLeftTitle1 {
                        margin-top: 10px;
                        font-size: 14px;
                        font-weight: 500;
                    }
                    .meListBoxItemLeftTitle2 {
                        font-size: 12px;
                        color: rgb(128, 128, 128);
                        margin-bottom: 10px;
                    }
                }
            }
            .meListBoxItemRight {
            }
        }
    }
    .meMainBox {
        width: 100%;
        min-height: 200px;
        padding: 15px;
    }
}
</style>